<template>
  <FormTable :name="table.name" :tableButton="table.button" :formRules="formRules" :tableData="table.tableData"
    :columns="table.columns" :total="total" :currentPage="listQuery.pageNo" :pageSize="listQuery.pageSize"
    @changeTableData="changeTableData" @tableButtonClick="addZJ">
    <template #check="{ slotProps }">
      <el-tag class="ml-2" :type="slotProps.check ? 'success' : 'danger'">
        {{ checkFilter(slotProps.check) }}
      </el-tag>
    </template>
    <template #operator="{ slotProps }" class="table_button_list">
      <span class="table_button" @click="setData('edit', slotProps)">查看</span>
      <el-divider direction="vertical" />
      <span class="table_button" @click="setData('edit', slotProps)">编辑</span>
      <el-divider direction="vertical" />
      <span class="table_button" @click="handleDel(slotProps)">删除</span>
    </template>
  </FormTable>
  <el-dialog v-model="dialogVisible" title="新增专家" :before-close="handleClose">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="专家姓名">
        <el-input v-model="formInline.user" placeholder="专家姓名" clearable />
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="formInline.user" placeholder="身份证号" clearable />
      </el-form-item>
      <el-form-item label="单位名称">
        <el-input v-model="formInline.user" placeholder="单位名称" clearable />
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="formInline.user" placeholder="联系方式" clearable />
      </el-form-item>
      <el-form-item label="职务职称">
        <el-input v-model="formInline.user" placeholder="职务职称" clearable />
      </el-form-item>
      <el-form-item label="业务领域">
        <el-input v-model="formInline.user" placeholder="专家姓名" clearable />
      </el-form-item>
    </el-form> 
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script name="list-two" setup>
import FormTable from "@/components/FormTable/index.vue";
const dialogVisible = ref(false)
const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const onSubmit = () => {
  console.log('submit!')
}
let listQuery = ref({
  pageNo: 1,
  pageSize: 10,
});
let total = ref(0);
const table = reactive({
  tableData: [{ id: 1 }, { id: 2 }],
  name: '专家列表',
  button: '添加',
  columns: [
    {
      label: "名称",
      field: "id",
    },
    {
      label: "身份证号",
      field: "name",
    },
    {
      label: "单位名称",
      field: "email",
    },
    {
      label: "联系方式",
      field: "email",
    },
    {
      label: "职务/职称",
      field: "email",
    },
    {
      label: "业务领域",
      field: "email",
    },
    {
      prop: 'operator',
      label: "操作",
      field: "email",
    },
  ],
  totalRecordCount: 10,
  sortable: {},
});
const formRules = ref([
  {
    type: "input",
    field: "username",
    title: "专家姓名",
    value: "",
  },
  {
    type: "input",
    field: "password",
    props: {
      type: "password",
    },
    title: "身份证号",
    value: "",
  },
  {
    type: "input",
    field: "username12",
    title: "单位名称",
    value: "",
  },
  {
    type: "input",
    field: "username",
    title: "联系方式",
    value: "",
  },
  {
    type: "select",
    field: "username",
    title: "职务/职称",
    value: "",
  },
  {
    type: "select",
    field: "username",
    title: "业务领域",
    value: "",
  }
]);
const addZJ = () => {
  dialogVisible.value = true
}
</script>
<style lang="scss" scoped></style>
